<template>
  <div v-loading="loading">
    <el-breadcrumb>
      <el-breadcrumb-item
        :to="{ path: '/government/emergency' }"
      >应急响应管理</el-breadcrumb-item>
      <el-breadcrumb-item>应急响应详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="cad-box" style="margin: 20px 0">
      <div style="width: 100%">
        <div class="obj_title">基本信息</div>
        <div class="obj_box">
          <div class="obj_item">机构名称：{{ dataObj.name1 }}</div>
          <div class="obj_item">发生地址：{{ dataObj.name2 }}</div>
          <div class="obj_item">状态：{{ dataObj.name3 }}</div>
          <div class="obj_item">事件类型：{{ dataObj.name4 }}</div>
          <div class="obj_item">涉及人员：{{ dataObj.name5 }}</div>
          <div class="obj_item">紧急程度：{{ dataObj.name6 }}</div>
          <div class="obj_item">事件描述：{{ dataObj.name7 }}</div>
        </div>
      </div>
      <div style="width: 100%; margin-top: 40px">
        <div class="obj_title">处理信息</div>
        <div class="obj_box">
          <div style="width: 100%">
            <div class="obj_bt_box">
              <div class="box_label">处理数据：</div>
              <div class="box_value">
                <el-table :data="tableData" style="width: 90%" border>
                  <el-table-column prop="date" label="日期" align="center" />
                  <el-table-column prop="name" label="姓名" align="center" />
                  <el-table-column prop="address" label="地址" align="center" />
                </el-table>
              </div>
            </div>
            <div class="obj_bt_box">
              <div class="box_label">处理内容：</div>
              <div class="box_value">
                <el-input
                  v-model="textarea"
                  style="width: 90%"
                  type="textarea"
                  :rows="6"
                  placeholder="请输入内容"
                />
              </div>
            </div>
            <div class="obj_bt_box">
              <div class="box_label">附件：</div>
              <div class="box_value">
                <el-upload
                  action="/api/system/upload"
                  list-type="picture-card"
                  :auto-upload="true"
                  :file-list="fileListShow"
                  :on-success="handleFileSuccess"
                  :before-upload="handleBefore"
                >
                  <i slot="default" class="el-icon-plus" />
                  <div slot="file" slot-scope="{ file }">
                    <img
                      style="height:148px"
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    >
                    <span class="text">{{ file.name }}</span>
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in" />
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                        <i class="el-icon-download" />
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                      >
                        <i class="el-icon-delete" />
                      </span>
                    </span>
                  </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cad-box flex-card" style="margin: 20px 0;justify-content: space-evenly;">
      <el-button type="warning">确 认</el-button>
    </div>
  </div>
</template>

<script>
import fileImage from '@/assets/file_image.png'
export default {
  data () {
    return {
      textarea: '',
      loading: false,
      idS: '',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileList: [],
      fileImage,
      fileListShow: [],
      dataObj: {
        name1: '长沙市雨花区托育综合服务中心',
        name2: '湖南省长沙市雨花区香樟路255号',
        name3: '未处理',
        name4: '儿童走失',
        name5: '李通、张三',
        name6: '二级',
        name7: '没有查到离园信息'
      },
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },

  created () {
    const { id } = this.$route.query
    this.idS = id
  },
  mounted () {},
  methods: {
    handleRemove (file) {
      console.log(file)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload (file) {
      console.log(file)
    },
    handleBefore (file) {
      console.log(file, 'handleBefore')
    },
    handleFileSuccess (response, file, fileList) {
      this.fileList.push({
        uid: file.uid,
        name: response.data.name,
        url: response.data.url
      })
      let fileExtension = response.data.url.split('.').pop() // 获取文件后缀
      fileExtension = fileExtension.toLowerCase() // 将后缀转换为小写，以便比较
      if (['jpg', 'jpeg', 'png', 'gif', 'svg'].includes(fileExtension)) {
        this.fileListShow.push({
          uid: file.uid,
          name: response.data.name,
          url: response.data.url
        })
      } else {
        this.fileListShow.push({
          uid: file.uid,
          name: response.data.name,
          url: fileImage
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-upload-list__item{
  overflow: inherit;
}
.left-user {
  display: flex;
  justify-content: space-between;
  .left-user-info {
    margin-left: 10px;
    line-height: 30px;

    .name-item {
      font-weight: bold;
    }

    .message-item {
      font-size: 13px;
      color: #808080;
    }
  }
}
.obj_title {
  font-size: 18px;
  font-weight: bold;
}
.obj_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
  margin-left: 50px;
  .obj_bt_box {
    width: 100%;
    .box_label {
    }
    .box_value {
      margin: 30px 0px;
    }
  }
  .obj_item {
    width: 30%;
    padding: 20px 0px;
  }
}
.title-card {
  font-weight: bold;
  margin-bottom: 20px;
}

.flex-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-box {
  display: flex;

  .left-message {
    width: 65%;
    padding-right: 150px;

    .demo-ruleForm {
      ::v-deep .el-form-item {
        margin-bottom: 22px;
      }

      .box-border {
        margin-bottom: 30px;
        border-top: 1px solid #ebebee;
      }
    }

    ::v-deep .el-form-item {
      margin-bottom: 55px;
    }
  }
  .right-record {
    flex: 1;
    padding-left: 30px;
    margin-left: 30px;

    ::v-deep .el-card {
      background-color: #f6f8fa;
      border: 1px solid #f6f8fa;
    }
    ::v-deep .is-always-shadow {
      box-shadow: none;
    }

    ::v-deep .el-timeline-item__timestamp {
      color: black;
      font-size: 15px;
    }

    .text-content {
      margin-top: 20px;
      color: #808080;
    }
  }
}
</style>
